import QtQuick 1.0
import QtMobility.gallery 1.1
import com.nokia.symbian 1.0

// The skeleton of this page is provided by Daniel.Wilms@nokia.com
// Thanks to him

Page {
    id: page4
    anchors.fill: parent
    tools: toolBarMainPage
    // orientationLock: PageOrientation.LockLandscape

    property string imageUri: ""
    property int yCenter: 200

    Rectangle{
        anchors.fill: parent
        color: "black"

        DocumentGalleryModel {
            id: galleryModel
            rootType : DocumentGallery.Image
            properties : [ "url" ]
            filter :  GalleryLessThanEqualsFilter {
                property: "width"
                value: 800
            }
        }
        Component {
            id: appDelegate
            Item {
                width: 300
                height: 300
                scale: PathView.iconScale
                z: PathView.height
                MouseArea{
                    id: mouseArea
                    anchors.fill: parent
                    onPressAndHold: {
                        imageUri= myIcon.source
                        query.open();
                    }
                }

                Image {
                    id: myIcon
                   // cache: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    source: url
                    width:  parent.width
                    height: parent.height
                    smooth: true
                    asynchronous: true
                    states: State {
                        name: "pressed"; when: mouseArea.pressed
                        PropertyChanges { target: myIcon; scale: 0.9 }
                    }
                }

                Image {
                    id: reflection
                    height: myIcon.height-90
                    width:  myIcon.width
                    anchors.top: myIcon.bottom
                    anchors.topMargin: 10
                    source: url
                    transform: Rotation {
                        origin.x :width
                        origin.y :105
                        axis {
                            x: 1
                            y: 0
                            z: 0
                        }
                        angle: 180
                    }
                }
                Image {
                    id: shadow
                    y:reflection.y
                    source: "qrc:/images/FadeDown.png"
                    height: myIcon.height-90
                    width:  myIcon.width

                }

                transform: Rotation {
                    origin.x :width/2
                    origin.y :height/2
                    axis {
                        x: 0
                        y: 1
                        z: 0
                    }
                    // angle: PathView.rotation
                }
            }
        }

        PathView {
            id: view
            width: parent.width
            anchors.fill: parent
            focus: true
            model: galleryModel
            delegate : appDelegate
            pathItemCount: 4
            interactive: true
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            property int xcenter: Math.round( parent.width/2 )
            property int ycenter: Math.round( parent.height/2 )
            property int xsize: parent.width


            path: Path {
                startX: 0
                startY: yCenter
                PathAttribute { name: "iconScale"; value: 0.4 }
                PathAttribute { name: "rotation"; value: 90 }
                PathAttribute { name: "height"; value: -10 }
                PathLine { x: view.xcenter; y: yCenter }
                PathAttribute { name: "iconScale"; value: 1.0 }
                PathAttribute { name: "rotation"; value: 0 }
                PathAttribute { name: "height"; value: 0 }
                PathLine { x: view.xsize; y: yCenter }
                PathAttribute { name: "iconScale"; value: 0.4 }
                PathAttribute { name: "rotation"; value: -90 }
                PathAttribute { name: "height"; value: -10 }
            }
            onCurrentIndexChanged: {
                console.log("Current item: " + galleryModel.get(currentIndex).url)
            }
        }
    }

    QueryDialog {
        id: query
        width: parent.width
        icon: "image://theme/icon-l-contacts"
        titleText: "Share Image."
        message: "Do you want to share image?"
        acceptButtonText: "Yes"
        rejectButtonText: "No"
        onAccepted: console.log("Image sharing not actually implemented :(");
    }
}
